<template>
	<view class="need_main" @click="getNeedInfo">
		<view class="need_cover">
			<lazyLoad threshold="-200" border-radius="10" :image="data.demandCover"></lazyLoad>
		</view>
		<view class="need_text">
			<view class="need_text_head">
				<span class="card-name" v-html="data.demandName">
				</span>
				<span class="card-price">
					￥{{data.demandPrice | pointLength(4)}}
				</span>
			</view>
			<view class="card-address">
				{{data.detailedAddress | strLength(30)}}
			</view>
			
			<view class="card-address">
				{{data.createTime}}
			</view>
		</view>
	</view>
</template>


<script>
	import lazyLoad from "components/common/lazyLoad"
	export default {
		components: {
			lazyLoad
		},
		props: {
			data: {
				type: Object,
				require: true
			}
		},
		methods: {
			getNeedInfo() {
				const {id,demandType} = this.data
				this.pushNewPage("demand", {
					id,
					type:demandType
				})
			}
		}
	}
</script>

<style scoped>
	.need_main {
		border-radius: 8px;
		background-color: #ffffff;
		position: relative;
		overflow: hidden;
		display: flex;
	}
	.need_cover{
		flex: 1;
		flex-shrink: 0;
	}
	.need_text {
		flex: 2;
		flex-shrink: 0;
		box-sizing: border-box;
		padding: 10rpx 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
	}
	.need_text_head{
		display: flex;
	}

	.card-name {
		font-size: 32rpx;
		font-weight: bold;
		color: rgba(56, 56, 56, 1);
		/* 文本单行显示省略号 */
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 1;
		overflow: hidden;
	}

	.card-address {
		font-size: 24rpx;
		color: rgba(128, 128, 128, 1);
	}

	.card-price {
		font-size: 28rpx;
		color: #fc6c44;
	}

</style>
